<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tag{
            width: 100px;
            border: solid 1px red;
            margin: 0 auto;
            padding: 5px 10px;
        }
        #tag>#head>span:nth-child(3){
            text-decoration: none;
            color: black;
        }
        #tag>#head>span{
            text-decoration: underline;
            color: blue;
        }
        #tag>#txt{
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div id="tag">
        <div id="head">
            <span id="big">大</span>
            <span id="center">中</span>
            <span id="small">小</span>
        </div>
        <div id="txt1">
            <p id="p1">
                清风袭来，衣物凌乱的散落在地上，陆瑶觉得浑身燥热。
            </p>
        </div>
    </div>
    <script>
        function $$(id){
            return document.getElementById(id);
        }
        //获取三个按钮对象
        var btnBig=$$("big");
        var btnCenter=$$("center");
        var btnSmall=$$("small");
        //获取文本框内文字对象
        var txt=$$("p1");
        //绑定单击事件
        btnBig.onclick = function(){
            txt.style.fontSize="20px";
        }
        btnCenter.onclick = function(){
            txt.style.fontSize="15px";
        }
        btnSmall.onclick = function(){
            txt.style.fontSize="5px";
        }
    </script>
</body>
</html>